<template>
    <h2>社区计划申请</h2>
  <el-form
    :model="commForm"
    ref="commForm"
    status-icon
    :rules="rules"
    class="demo-commForm"
  >
    <el-form-item label="计划名称:" prop="name">
      <el-input v-model="commForm.name" autocomplete="off"/>
    </el-form-item>
    <el-form-item label="所属社区" prop="planCommunityName">
      <el-input v-model="commForm.planCommunityName"  autocomplete="off"/>
    </el-form-item>
    <el-form-item label="开始时间" prop="startTime">
      <el-input v-model="commForm.startTime" type="date" autocomplete="off"/>
    </el-form-item>
    <el-form-item label="结束时间" prop="endTime">
      <el-input v-model="commForm.endTime"  type="date" autocomplete="off"/>
    </el-form-item>
    <el-form-item id="bu">
      <el-button type="primary" @click="submitForm()"
        >提交</el-button
      >
      <el-button @click="resetForm()">清空</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      commForm: {
        name:"",
        planCommunityName: "",
        startTime: "",
        endTime: ""
        
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入计划名",
            trigger: "blur",
          },
          {
            min: 2,
            max: 6,
            message: "长度在2到6个字符",
            trigger: "blur",
          },
        ],
        planCommunityName: [
          {
            required: true,
            message: "请输入社区名",
            trigger: "blur",
          },
          {
            min: 2,
            max: 4,
            message: "长度在2到6个字符",
            trigger: "blur",
          },
        ],
        startTime:[
            {
               required: true,
               message: "请输入计划开始时间",
               trigger: "blur", 
            }
        ],
        endTime:[
            {
               required: true,
               message: "请输入计划结束时间",
               trigger: "blur", 
            }
        ]
      },
    };
  },
  methods: {
    submitForm() {
      console.log(this.commForm.startTime);
      console.log(this.commForm.endTime);
      this.$axios({
          method: "post",
          url: "http://localhost:8080/nav/tylir/plantwo",
          data:this.$qs.stringify(this.commForm)
        }).then(res => {
            console.log(res.data);
            if(res.data.code == 1){
              alert("成功添加计划");
              this.$router.go(-1);
            }else{
              console.log("error");
            }
        })
    },
    resetForm(){
        this.commForm.name = '';
        this.commForm.planCommunityName = '',
        this.commForm.startTime = '',
        this.commForm.endTime = ''
    },
  },
};
</script>

